﻿<html>
<head>
    <title>11</title>
    <link href="/Content/json/StyleSheet1.css" rel="stylesheet" />
    <link href="../dropload.css" rel="stylesheet" />
    <script src="/YJScripts/jquerytools-master/lib/jquery-1.7.1.min.js"></script>
    <script src="../YJ_dropload.js"></script>
</head>

<body>
    <div class="outer" style="top:100px">
        <div class="header">
            <h1>头部</h1>
            <a href="javascript:;" class="btn lock">锁定</a>
        </div>
        <div class="inner">
            <div class="lists">
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>1文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>2文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>3文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>4文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>5文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>6文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>7文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>5文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>6文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>7文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>5文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>6文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>7文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
            </div>

        </div>

        <script>
    // 按钮操作
    $('.header .btn').on('click', function() {
        var $this = $(this);
        if (!!$this.hasClass('lock')) {
            $this.attr('class', 'btn unlock');
            $this.text('解锁');
            // 锁定
            dropload.lock();
        } else {
            $this.attr('class', 'btn lock');
            $this.text('锁定');
            // 解锁
            dropload.unlock();
        }
    });

    // dropload
    var dropload = $('.inner').dropload({
        domUp: {
            domClass: 'dropload-up',
            domRefresh: '<div class="dropload-refresh">↓下拉加载更多</div>',
            domUpdate: '<div class="dropload-update">↑释放加载</div>',
            domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
        },
        domDown: {
            domClass: 'dropload-down',
            domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
            domUpdate: '<div class="dropload-update">↓释放加载</div>',
            domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
        },
        loadUpFn: function(me) { //prepend
            $.ajax({
                type: 'GET',
                url: 'json/update.json',
                dataType: 'json',
                success: function(data) {
                    var result = '';
                    for (var i = 0; i < data.lists.length; i++) {
                        result += '<a class="item opacity" href="' + data.lists[i].link + '">'
                            + '<img src="' + data.lists[i].pic + '" alt="">'
                            + '<h3>' + data.lists[i].title + '</h3>'
                            + '<span class="date">' + data.lists[i].date + '</span>'
                            + '</a>';
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function() {
                        // $('.lists').html('');
                        $('.lists').prepend(result);
                        me.resetload();
                    }, 1000);
                },
                error: function(xhr, type) {
                    alert('Ajax error!');
                    me.resetload();
                }
            });
        },
        loadDownFn: function(me) { //append
            $.ajax({
                type: 'GET',
                url: '/content/json/more.json',
                dataType: 'json',
                success: function(data) {
                    var result = '';
                    for (var i = 0; i < data.lists.length; i++) {
                        result += '<a class="item opacity" href="' + data.lists[i].link + '">'
                            + '<img src="' + data.lists[i].pic + '" alt="">'
                            + '<h3>' + data.lists[i].title + '</h3>'
                            + '<span class="date">' + data.lists[i].date + '</span>'
                            + '</a>';
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function() {
                        $('.lists').append(result);
                        me.resetload();
                    }, 1000);
                },
                error: function(xhr, type) {
                    alert('Ajax error!');
                    me.resetload();
                }
            });
        }
    });

        </script>
    </div>
</body>
</html>